import {
  ScrollArea,
  Divider,
  NavLink,
  CloseButton,
  Button,
  Text,
  Tabs,
  JsonInput,
} from "@mantine/core";
import { usePageTabManagementContext } from "@/components/PageTabManagementProvider";
import { useLocation } from "react-router-dom";
import { IconTrash } from "@tabler/icons-react";

function PageSwitcher() {
  const { pageTabs, openPageTab, closePageTab, closeAll } =
    usePageTabManagementContext();
  const location = useLocation();

  return (
    <>
      <Divider my="xs" label="页签栏" labelPosition="center" />
      <ScrollArea h={"70vh"}>
        {pageTabs.map(({ path, title }) => (
          <>
            <NavLink
              key={path}
              label={<Text size={"sm"}>{title}</Text>}
              onClick={() => openPageTab(path)}
              active={location.pathname === path}
              rightSection={
                path !== "/" ? (
                  <CloseButton
                    variant="transparent"
                    size="xs"
                    onClick={(e) => {
                      e.stopPropagation();
                      closePageTab(path);
                    }}
                  />
                ) : (
                  ""
                )
              }
            />
            <Divider size={"xs"} />
          </>
        ))}
        {pageTabs.length > 1 && (
          <NavLink
            label={
              <Button
                fullWidth
                variant="subtle"
                onClick={closeAll}
                rightSection={<IconTrash size={14} />}
              >
                清空
              </Button>
            }
          />
        )}
      </ScrollArea>
    </>
  );
}

export default PageSwitcher;
